<!--
 * @Author: your name
 * @Date: 2021-07-01 16:08:23
 * @LastEditTime: 2021-07-03 20:21:26
 * @LastEditors: jiangsx
 * @Description: In User Settings Edit
 * @FilePath: \briup\项目\mobile-app\src\views\mine\info.vue
-->
<template>
  <div>
    <div class="title">
      <van-nav-bar
        title="个人信息"
        left-text="返回"
        @click-left="$router.back()"
        left-arrow
      />
    </div>
    <div class="user">
      <div class="photo">
        <img
          :src="userData.userFace"
          alt=""
          style="height: 100%; width: 100%; border-radius: 50%"
        />
      </div>
      <div class="pg">
        <div
          style="
            margin: 20px;
            text-align: center;
            font-size: 12px;
            color: #ccccff;
          "
        >
          可可喜欢家，家喜欢干净
        </div>
        <div
          style="
            margin: 20px;
            text-align: center;
            font-size: 22px;
            color: #cc9933;
          "
        >
          {{ userData.certificationStatus }}
        </div>
      </div>
    </div>
    <div style="margin-top: 20px">
      <van-form validate-first @failed="form" ref="form">
        <van-field
          v-model="form.realname"
          name="真实姓名"
          label="真实姓名"
          placeholder="真实姓名"
        />
        <van-field
          v-model="form.idCard"
          label="身份证号"
          name="身份证号"
          placeholder="身份证号"
        />
        <van-field
          v-model="form.bankCard"
          label="银行卡号"
          name="银行卡号"
          placeholder="银行卡号"
        />
        <van-field name="身份证正面照" label="身份证正面照">
          <template #input>
            <van-image
              width="100"
              height="100"
              :src="form.idcardPhotoPositive"
            />
            <!-- <van-uploader v-model="form.idcardPhotoPositive" :max-count="1" /> -->
          </template>
        </van-field>
        <van-field name="身份证反面照" label="身份证反面照">
          <template #input>
            <van-image
              width="100"
              height="100"
              :src="form.idcardPhotoNegative"
            />
            <!-- <van-uploader v-model="form.idcardPhotoNegative" :max-count="1" /> -->
          </template>
        </van-field>
        <van-field name="银行卡照片" label="银行卡照片">
          <template #input>
            <van-image width="100" height="100" :src="form.bankCardPhoto" />
            <!-- <van-uploader v-model="form.bankCardPhoto" :max-count="1" /> -->
          </template>
        </van-field>
      </van-form>
    </div>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import { getInfo } from "@/api/user";
import { Toast } from "vant";
export default {
  data() {
    return {
      userData: [],
      token: "",
      form: {},
    };
  },
  computed: {},
  methods: {
    async findUserData() {
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner",
        overlay: true,
      });
      const res = await getInfo(this.token);
      this.userData = res.data;
      this.form = res.data;
      Toast.clear();
    },
  },
  created() {
    this.token = getToken();
    this.findUserData();
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
.van-nav-bar {
  background-image: linear-gradient(90deg, #ccff99, #66cccc);
}
.user {
  width: 100%;
  height: 120px;
  // background-color: #ccff99;
  background-image: linear-gradient(90deg, #ccff99, #66cccc);
  display: flex;
}
.photo {
  width: 50%;
  height: 100px;
  border-radius: 50%;
  left: 20px;
  background-color: #99ccff;
  margin: 10px;
  text-align: center;
}
.pg {
  width: 50%;
  height: 100px;
  margin: 0 auto;
}
</style>